<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 图片 -->
    <div class="main">
      <div class="picture">
        <!-- <img src="/gg_img/commodity.jpg" alt="" /> -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img src="/gg_img/commodity.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="/gg_img/commodity2.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="/gg_img/commodity3.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="/gg_img/commodity4.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <!-- 文字介绍 -->
      <div class="wb">
        <p class="p1">
          特来电新能源便携充电器充电枪通用车型适用特斯拉蔚来小鹏家用
          <span class="sp1"> 国标5米 </span>
        </p>
        <p class="p2">
          <span>即插即充;</span><span>随车携带；</span><span>安全防护；</span>
        </p>
        <div class="hy">
          <span class="s1">会员价:¥899</span>
          <p class="p3">
            <span>立即开通</span><img src="/sp_img/you.png" alt="" />
          </p>
        </div>
        <!-- 购物详情 -->
        <div class="xq">
          <div class="x1">
            <p class="p4">数量</p>
            <p class="p5">
           
                <button disabled>-</button>
             
              <button>1</button>
              <button>+</button>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-button @click="$router.push('/pay')" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  .picture {
    img {
      width: 100%;
    }
  }
  .wb {
    width: 97%;
    margin: 0 auto;
    .p1 {
      margin: 2% 0;
      font-weight: 700;
      font-size: 1rem;
    }
    .p2 {
      margin-bottom: 4%;
      color: red;
      font-size: 00.1rem;
      span {
        margin-right: 2%;
      }
    }
    .hy {
      display: flex;
      margin-bottom: 5%;
      .s1 {
        width: 100px;
        font-size: 14px;
      }
      .p3 {
        width: 69%;
        margin: 0;
        font-size: 14px;
        text-align: right;
        img {
          width: 6%;
          vertical-align: middle;
        }
      }
    }
    .xq {
      .x1 {
        display: flex;
        .p4 {
          width: 30%;
          line-height: 200%;
          font-weight: 600;
        }
        .p5 {
          width: 64%;
          text-align: right;
          button {
            margin-left: 3%;
            padding: 2%;
            width: 15%;
          }
        }
      }
    }
  }
}
</style>